<iframe id="iframeId" src="http://localhost:2002/index1.html" scrolling="no"
    style="position:absolute;width:100%;height:100%;border: 0;">
</iframe>

<div class="rooms" style="text-align: center;position:absolute;top:10%;right:5%;height:80%;overflow: scroll;color:aliceblue;border-radius: 10px;
    width: 23%;
    padding: 10px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    background-color: rgba(45, 45, 60, 0.5);">
    <label style="font-size: 18px;text-shadow: 0 0 2px black; color: white;" (click)="flash()" title="刷新房间列表">房间列表</label><br>
    <div *ngFor="let room of rooms;let i = index" style="text-align: center;">

        <label *ngIf="room.num > 0">
            <input type="radio" name="model" [value]="room.name" (click)="setRoom(room.name)">
            <img src="../../../assets/maze.png" alt="Lion">
            <span>{{room.name}}&emsp;当前人数：{{room.num}}</span>
        </label>

    </div>

</div>

<button (click)="show()" class="lu-btn-3d" style="position:absolute;right:20%;top:93%;border-radius:20px;
transform: skew(-30deg);
                /*设置倾斜度为-30*/
    
                -webkit-transform: skew(-30deg);
    
                -moz-transform: skew(-30deg);
    
                -o-transform: skew(-30deg);
    
                -ms-transform: skew(-30deg);">
    <a class="lu-btn-3d lu-a-3d">创建房间</a>
</button>
<button (click)="enter()" class="lu-btn-3d" style="position:absolute;right:10%;top:93%;border-radius:20px;
transform: skew(-30deg);
                /*设置倾斜度为-30*/
    
                -webkit-transform: skew(-30deg);
    
                -moz-transform: skew(-30deg);
    
                -o-transform: skew(-30deg);
    
                -ms-transform: skew(-30deg);">
    <a class="lu-btn-3d lu-a-3d">进入房间</a>
</button>


<ul style="position:absolute;top:15%;left:8%;color:aliceblue;border-radius: 10px;
    width: 18%;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    background-color: rgba(45, 45, 60, 0.5);">
    <li style="--z:3" (click)="goToPersonalCenter()"><a>个人中心</a></li>
    <li style="--z:2" (click)="show_method()"><a>攻略</a></li>
    <li style="--z:1" (click)="logout()"><a>退出登录</a></li>
</ul>

<div id="id01" class="modal" style="margin: 0 auto;">

    <div class="container" style="padding:10px;margin: 0 auto;width:30%;background-color:#f1f1f1;text-align: center;">
        <label>请输入要创建的房间名</label><br>
        <input style="margin: 10px; width: 80%;
            border-radius: 5px;
            padding: 10px;
            font-size: 16px;" type="text" id="name" name="name" [value]="name" (input)="change()">
        <div class="error-message">
            <p *ngIf="error">房间已存在</p>
            <p *ngIf="empty">房间名不能为空</p>
        </div>

        <button type="button" (click)="close()" class="cancelbtn" style="border-radius:20px;">取消</button>
        <button (click)="room()" style="border-radius:20px;" class="cancelbtn">确认创建并进入</button>
    </div>
</div>

<!-- 有未退出的房间 -->
<div id="id03" class="modal" style="margin: 0 auto;">

    <div class="container" style="padding:10px;margin: 0 auto;width:30%;background-color:#f1f1f1;text-align: center;">
        <label>您有未退出的房间</label><br>
        <br>
        <div class="error-message">
            <p *ngIf="error">房间已存在</p>
            <p *ngIf="empty">房间名不能为空</p>
        </div>
        <button (click)="re_enter()" style="border-radius:20px;" class="cancelbtn">重新进入</button>
    </div>
</div>


<!-- 攻略 -->
<div id="id02" class="modal1" style="margin: 0 auto;">
    <!-- <div class="container" style="padding:10px;margin: 0 auto;width:30%;background-color:#f1f1f1;text-align: center;"> -->
    <!-- 幻灯片容器 -->
    <div class="slideshow-container" style="top:-5%">

        <!-- 带有数字和标题文本的全宽图像 -->
        <div class="mySlides fade">
            <div class="numbertext">1 / 4</div>
            <img style="border-radius: 50px" src="../../../assets/攻略1.png" style="width:100%">
            <div style="background-color: #f1f1f1;" class="text">按 'S' 切换为高视角更有利于你走出迷宫</div>
        </div>

        <div style="border-radius:50px" class="mySlides fade">
            <div  class="numbertext">2 / 4</div>
            <img  style="border-radius: 50px" src="../../../assets/攻略3.png" style="width:100%">
            <div style="background-color: #f1f1f1;" class="text">你走过的路线会出现红线，防止你在场景中迷失方向</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">3 / 4</div>
            <img style="border-radius: 50px" src="../../../assets/攻略4.png" style="width:100%">
            <div style="background-color: #f1f1f1;" class="text">迷宫中有一些隐藏惊喜等待你去探索，同时也要小心强盗</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">4 / 4</div>
            <img  style="border-radius: 50px" src="../../../assets/攻略2.png" style="width:100%">
            <div style="background-color: #f1f1f1;" class="text">当你不知道如何走出迷宫时， 可以试试上面的算法，<a target="_blank" href="https://blog.csdn.net/m0_53157173/article/details/114486303">去学习</a></div>
        </div>

        <!-- Next and previous buttons -->
        <a class="prev" (click)="plusSlides(-1)">&#10094;</a>
        <a class="next" (click)="plusSlides(1)">&#10095;</a>
    </div>
    <!-- The dots/circles -->
    <div style="text-align:center">
        <span class="dot" (click)="currentSlide(1)"></span>
        <span class="dot" (click)="currentSlide(2)"></span>
        <span class="dot" (click)="currentSlide(3)"></span>
        <span class="dot" (click)="currentSlide(4)"></span>
        <br>
        <button type="button" (click)="close1()" class="cancelbtn" style="border-radius:20px;">关闭</button>
    </div>

    <!-- </div> -->
</div>
<app-message *ngIf="message" [type]="type" [text]="text"></app-message>